<template>
  <div class="new">
    <div>
      <h2 style="color: rgb(253, 200, 5);">新用户注册</h2>
      <h1 style="color: rgb(185, 185, 183);">USER REGISTER</h1>
      <p class="rightTop">
          已有帐号
          <a href="D:\Users\34866\Desktop\java\Html\day01\denglu.html">立即登录</a>
      </p>
    </div>
    <div class="center">
      <form @submit.prevent="handleSubmit">
        <div>
        <p>用户名:</p><input class="frontname" type="text" v-model="username" placeholder="请输入账号">
        </div>
        <div>
          <p>密码:</p>
          <input type="password" v-model="password" placeholder="请输入密码">
        </div>
        <div>
          <p>电子邮件:</p>
          <input type="email" v-model="email" placeholder="请输入电子邮件">
        </div>
        <div>
          <p>姓名:</p>
          <input type="text" v-model="name" placeholder="请输入姓名">
        </div>
        <div>
          <p>手机号:</p>
          <input type="tel" v-model="phone" placeholder="请输入手机号">
        </div>
        <div>
          <p>性别:</p>
          <select v-model="gender">
            <option value="" disabled selected>请选择性别</option>
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        <div>
          <p>出生日期:</p>
          <input type="date" v-model="birthdate" placeholder="请选择出生日期">
        </div>
        <div>
          <p>验证码:</p>
          <input type="text" v-model="captchaInput" placeholder="请输入验证码">
          <span id="captcha" style="font-weight: bold;">{{ captcha }}</span>
          <button type="button" @click="generateCaptcha" style="font-size: 16px;">刷新验证码</button>
        </div>
        <div>
          <input type="button" value="注册" @click="handleRegister" style="color: black; background-color: green; font-size: 20px;">
          <input type="reset" value="重置" @click="handleReset" style="color: black; background-color: yellow; font-size: 20px;">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      email: '',
      name: '',
      phone: '',
      gender: '',
      birthdate: '',
      captchaInput: '',
      captcha: ''
    };
  },
  computed: {
    loginLink() {
      return '#'; // 可以设置为实际的登录页面链接
    }
  },
  methods: {
    generateCaptcha() {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let captcha = '';
      for (let i = 0; i < 4; i++) {
        captcha += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      this.captcha = captcha;
    },
    handleRegister() {
      // 注册逻辑
      console.log('用户名:', this.username);
      console.log('密码:', this.password);
      console.log('电子邮件:', this.email);
      console.log('姓名:', this.name);
      console.log('手机号:', this.phone);
      console.log('性别:', this.gender);
      console.log('出生日期:', this.birthdate);
      console.log('验证码:', this.captchaInput);
      // 这里可以添加实际的注册请求
    },
    handleReset() {
      // 重置表单
      this.username = '';
      this.password = '';
      this.email = '';
      this.name = '';
      this.phone = '';
      this.gender = '';
      this.birthdate = '';
      this.captchaInput = '';
      this.generateCaptcha();
    },
    handleSubmit(event) {
      event.preventDefault();
      this.handleRegister();
    }
  },
  mounted() {
    this.generateCaptcha();
  }
};
</script>

<style scoped>
.new {
  margin: 0;
  padding: 0;
  height: 100vh; /* 设置高度为视口高度 */
  background-image: url('./test.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* 确保内边距和边框不会增加元素的总宽度和高度 */
}

/* .center {
  display: flex;  
  flex-direction: column;
  align-items: center;
  width: 100%; 
  max-width: 400px;
} */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], select {
  width: 60%;
  padding: 5px;
  margin-bottom: 1px;
  border: 1px solid #ccc;
}

header {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  color: white;
  padding: 10px;
  width: 100%;
}
</style>